<template>
  <view class="root">
    <u--input placeholder="请输入" v-model.trim="searchValue" prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #BCC0C8" clearable @change="onChange"></u--input>
    <view class="result-wrapper">
      <yy-scroll-view ref="locationRef" :auto-request="false" :request-url="FIND_BASE_POLICE_PAGE"
        :static-params="staticParams">
        <template slot-scope="{list}">
          <view class="scroll-item" v-for="(item, index) in list" :key="item.id" @click="onSelectLocation(item)">
            <view class="left-wrapper">
              <uni-icons type="location" size="40rpx"></uni-icons>
              <view class="location-name">{{ item.name }}</view>
            </view>
            <view class="right-wrapper">{{ item.distance ? convertDistance(item.distance) : '未知距离' }}</view>
          </view>
        </template>
      </yy-scroll-view>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    getLocation,
    navBack,
    convertDistance
  } from '@/utils/util'
  import {
    FIND_BASE_POLICE_PAGE
  } from '@/api/api.js'

  export default {
    data() {
      return {
        searchValue: '',
        FIND_BASE_POLICE_PAGE,
        staticParams: {}
      }
    },
    async onLoad(options) {
      // 判断有没有传过来 经纬度
      if (options.lng) {
        Object.assign(this.staticParams, options)
      } else {
        Object.assign(this.staticParams, {
          lng: '0',
          lat: '0'
        })
      }
      this.$refs.locationRef.getList('init', this.staticParams)
    },
    methods: {
      onSelectLocation(item) {
        uni.$emit('leadPoliceStation', [{
          ...item,
          policeAgencyName: item.name,
        }])
        navBack()
      },
      convertDistance,
      onChange(e) {
        Object.assign(this.staticParams, {
          policeAgencyName: e ? e.trim() : ''
        })
        this.$refs.locationRef.getList('init', this.staticParams)
      }
    }
  }
</script>
<style>
  page {
    background: #F9F9F9;
    padding: 17rpx;
    box-sizing: border-box;
  }
</style>
<style lang="scss" scoped>
  .root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 3rpx 3rpx 3rpx 3rpx;
    padding: 16rpx;

    /deep/.u-input {
      flex: none;
      background: #F9F9F9;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      border: 1rpx solid #F1EFEF;
      height: 88rpx;
    }

    .result-wrapper {
      flex: 1;
      height: 0;

      .scroll-item {
        height: 142rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #f5f5f5;
        justify-content: space-between;

        .left-wrapper {
          display: flex;
          align-items: center;

          .location-name {
            font-weight: bold;
            font-size: 28rpx;
            color: #000000;
          }
        }

        .right-wrapper {
          font-weight: 500;
          font-size: 26rpx;
          color: #aaaaaa;
          flex-shrink: 0;
        }
      }
    }
  }
</style>